1. #Homepage:


    FRONT-END
    HTML
    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display         CSS
    Acessibilidade
    #main-acess {
        width: 100%;
        height: 100%;
    }

    #content {
        width: 100%;
        height: 100%;
        padding: 50px;
        font-size: 1em;
        border-radius: 50px 50px;
        box-shadow: 5px 3px 5px #00000070;
    }

    #title-acess {
        text-align: center;
        font-size: 2.5em;
        padding: 20px;
    }

    #content>p.content__text-acess {
        font-size: 1em;
        text-align: justify;
    }

    #content>p.content__text-acess+p.content__text-acess,
    #content>p.content__text-acess:first-child {
        margin-bottom: 10px;
    }

    #content>p.content__text-acess.destaque {
        font-weight: bold;
        font-size: 1.3em;
        margin: 15px 0px 15px 0px;
    }

    #content>p.content__text-acess.small-destaque {
        font-size: 1em;
        font-style: italic;
        margin: 15px 0px 15px 0px;
    }

    code {
        font-family: Consolas, "courier new";
        color: #00a1ff;
        background-color: #f1f1f1;
        padding: 2px;
        font-size: 105%;
    }

    @media screen and (max-width:850px) {
        #content {
            font-size: 14px;

        }

        #title-acess {
            font-size: 2em;
        }
    }
    #main-acess {...    Text is not SVG - cannot display         Contraste
    /* CONTRASTE DA NAV e FOOTER */
    body{
        background-color: #000;
    }
    nav{
        border-bottom: white;
    }

    nav img{
        filter: invert(1);
    }
    .links a{
        color: yellow;
    }

    .links ul{
        background-color: #000;
    }

    .login a:hover{
        text-decoration: underline white 1px;
    }
    .links ul li{
        border-bottom: white solid 1px;
    }

    .links ul li a{
        color: yellow;
    }

    .botão a{
        background-color: white;
        border: white solid 1px;
        color: #000;
    }
    #acessibilidade{
        background-color: rgb(21, 21, 21);
        color:#fff ;
    }
    #acessibilidade a{
        color: yellow;
    }
    .botão a:hover{
        border: #fff solid 1px;
        color: #fff;
        background-color: #000;
    }

    label img{
        background-color: black;
    }

    footer{
        background-color: white;
        color: black;
    }

    @media screen and (max-width:859px){
        #bt_menu:checked ~ #menu{
            background-color: black;
        }
        .links a{
            color: #fff;
        }

        .botão a{
            color: black;
        }

    }

    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* ESTILO HOME */

    .busca{
        background-color: #000;
    }

    .search{
        background-color: #fff;
    }
    .search img{
        filter: contrast(0);
    }
    /*cards*/
    .card{
        box-shadow:0px 5px 10px white;
        background-color: white;
    }
    a:hover .card{
        box-shadow:0px 3px 15px black;
    }
    .card a:-webkit-any-link{
        color: #000;
    }
    .card h2{
        color: #000;
    }
    #title-index{
        color: #fff;
    }

    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */
    /* acessibilidade */
    #content {
        box-shadow: 5px 3px 5px #fff;
    }

    #content>p.content__text-acess,#title-acess {
        color: white;
    }
    #content>p.content__text-acess a {
        color: yellow;
    }
    code {
        color: #000;
        background-color: #f1f1f1;
    }

    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */
    /* Cadastro */
    .section__form{
        background-color: #000;
        color: #fff;
        border: 1px solid white;
        box-shadow: 1px 2px 5px #fff;
    }
    #cadastro__section{
        background-color: #000;
    }
    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* LOGIN */

    #main-login aside a{
        color:yellow;
    }

    #entrar{
        background-color: white;
        color: #000;
        border: #fff;
    }

    #entrar:hover{
        border: #fff solid 1px;
        color: #fff;
        background-color: #000;
    }
    #google{
        background-color: #000;
        border: solid 1px #000;
        color: #fff;
    }
    #login{
        color: #fff;
    }
    #main-login section img{
        filter: invert(1);
    }
    #lembrar{
        accent-color: white;
    }

    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* ONG */
    .section__ong{
        color: white;
    }
    .social__item a >img,.buttons__container button p + img{
        filter: invert(1);
    }

    .informations__botons > .informations__donation > input[type='button'],
    .informations__botons button {
        background-color: #fff;
        border: #fff solid 1px;
        color: #000;
    }
       
    .btSlider {
        background-color: white;
        color: #000;
    }
    /* --------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Favoritos ONG */
    #main__fav h1, #main__fav p, #main__fav h2{
        color: #fff;
    }
    #main__fav .card h2{
        color: #000;
    }
    /* CONTRASTE DA NAV e FOOTER */...    Text is not SVG - cannot display         Recuperação senha
    *{
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: black;
        border: none;
    }
    input, label {
        display: block;
        width: 100%;
    }
    input:focus, label:focus {
        outline: none;
    }
    a{
        color: 00a1ff;
    }
    body{
        padding-top: 5vh;
        background-image: url(../imgs/icons.svg);
        background-size: cover;
        background-position-y: -150px;
    }
    h2{
        text-align: center;
        margin-bottom: 10px;
    }

    /*form*/
    #main-container{
        width: 500px;
        margin-left: auto;
        margin-right: auto;
        background-color: #5fbff6;
        border-radius: 10px;
        padding: 25px;
    }
    #main-container h1{
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.6rem;
    }

    form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /*espaço entre os checkbox*/
    }
    .full-box{
        flex: 1 1 100%;
        position: relative;
    }
    .half-box{
        flex: 1 1 45%;
        position: relative;
    }
    .spacing{
        margin-right: 2.5%;
    }
    label{
        font-weight: bold;
        font-size: .8rem;
        margin-bottom: 5px;
    }
    input{
        border-bottom: 2px solid #000;
        padding: 10px;
        font-size: .9rem;
        margin-bottom: 30px;
    }
    input:focus{
        border-color: #5fbff6;
    }
    input[type="submit"]{
        background-color: black;
        color: #5fbff6;
        border: none;
        border-radius: 20px;
        height: 40px;
        cursor: pointer;
    }
    #termos{
        margin-right: 5px;
    }
    #termos, #termos-label{
        display: inline-block;
        width: auto;
    }

    /*validação*/
    .error-validation{
        color: red;
        position: absolute;
        top: 57px;
        font-size: .8rem;
    }
    .template{
        display: none;
    }
    *{...    Text is not SVG - cannot display         Passos (Steps)
    /*===== ROOT VARIABLES =====*/
    :root {
      --hue: 204;
      --brand: hsl(var(--hue), 97%, 54%);
      --brand-dark: hsl(var(--hue), 97%, 44%);
    }

    /*===== RESET CSS =====*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    /*===== BASE =====*/
    a {
      text-decoration: none;
    }

    /*===== STYLE CSS =====*/

    /* Header */
    header .progress-bar {
      background: var(--brand);
      padding: 2rem 1rem;
      display: flex;
      position: relative;
      align-items: center;
      z-index: 0;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      width: 100%;
    }

    header .progress-bar > section {
      position: absolute;
      width: min-content;
      right: 0;
      margin-right: 20px;

    }

    header .progress-bar > section > div {
      display: flex;
      margin: auto;
      width: max-content;
    }

    header .progress-bar > section > div .elipse-progress {
      background: #fff;
      clip-path: circle();
      font-size: 1.875rem;
      font-weight: 500;
      width: 3.25rem;
      height: 3.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    header .progress-bar > section > div .elipse-progress.pintado,
    header .progress-bar > section > div span.pintado {
      background: rgb(214, 214, 214);
    }

    header .progress-bar > section > div span {
      width: 8.75rem;
      margin-left: -1rem;
      z-index: 10;
      background: #fff;
      margin-right: -1rem;
      height: 1rem;
      align-self: center;
      z-index: -1;
    }

    header .nav {
      background: rgb(250, 250, 250);
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      padding: 1rem 0;
    }

    header .nav .nav-list {
      list-style: none;
      display: flex;
      justify-content: space-evenly;
    }

    header .nav .nav-list .nav-item .nav-link {
      font-size: 1rem;
      color: #000;
      font-weight: 600;
    }

    /* Main */
    main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3.75rem;
      padding: 3.75rem 0;
    }

    main .main-title {
      font-size: 3rem;
      font-weight: 400;
      text-align: center;
    }

    main .form-container {
      width: 34.25rem;
      padding: 2.75rem;
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    main .form-container .form-title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    main .form-container > div {
      display: flex;
      gap: 1rem;
    }

    main .form-container .input-field {
      width: 100%;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.3);
    }

    main .form-container .buttons {
      display: flex;
      justify-content: space-between;
    }

    main .form-container .buttons .button-blue {
      padding: 0.5rem 2rem;
      background: var(--brand);
      border-radius: 5px;
      border: none;
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
    }

    main .form-container .buttons .button-blue:hover {
      background: var(--brand-dark);
    }

    main .form-container .buttons .button-white {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.5rem 0.75rem;
      color: rgba(0, 0, 0, 0.5);
      font-weight: 600;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
      transition: box-shadow 0.3s;
      background: #fff;
      font-size: 1rem;
    }

    main .form-container .buttons .button-white:hover {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }

    main .form-container .buttons .button-white .google-icon {
      width: 1.5rem;
    }

    main .form-container .input-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 0;
      margin-bottom: 2rem;
    }

    main .form-container .input-group .input {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    @media screen and (max-width:800px){
      header .progress-bar > section > div .elipse-progress {
        background: #fff;
        clip-path: circle();
        font-size: 1rem;
        font-weight: 700;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      header .progress-bar > section > div span {
        width: 3.75rem;
        margin-left: -1rem;
        z-index: 10;
        background: #fff;
        margin-right: -1rem;
        height: 0.5rem;
        align-self: center;
        z-index: -1;
      }
    }
    @media screen and (max-width:580px){
      main .form-container {
        width: 90vw;
        padding: 2.75rem;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
      header .progress-bar > section > div span {
        width: 2rem;
        margin-left: -1rem;
        z-index: 10;
        background: #fff;
        margin-right: -1rem;
        height: 0.5rem;
        align-self: center;
        z-index: -1;
      }
    }
    /*===== ROOT VARIABLES =====*/...    Text is not SVG - cannot display         Cadastrar
    /* Tag gerals */
    #cadastro {
        width: 100%;
        height: calc(100vh - 113px);
        /*Para que a tela não fique com a barra lateral eu estou tirando todos os pixel de elementos fixados (header + footer)*/
        font-size: 1em;
        display: flex;
    }
    #home-acess{
        z-index: 999;
    }
    aside {
        height: calc(100vh - 91px);
        display: flex;
        border-right: #00a1ff 1px solid;
    }

    aside img{
        width: 50vw;
        height: 100%;
    }
    #cadastro__section {
        width: 100%;
        height: calc(100% - 91px);
        display: flex;
        justify-content: center;
        /* justify-content: flex-end; */
        align-items: center;
        position: relative;
        margin-top: 0;
        background-color: #fff;
        /* padding-right: 2%; */
    }
    #cadastro__section div img {
        width: 400px;
    }

    /* Formulario */
    .section__form {
        width: 100%;
        height: max-content;
        border: 1px solid black;
        box-shadow: 1px 2px 5px #00000070;
        padding: 30px;
        position: relative;
        margin: 0px 10%;
    }

    .section__title {
        width: 100%;
        text-align: center;
        font-size: 2em;
        margin: 10px 0px;
    }

    .form__group {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .form__group .group__text label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form__group .group__text label::before,
    .about__radios p::before {
        content: "* ";
        color: #00a1ff;
    }

    .group__text {
        width: 40%;
    }

    .group__about {
        width: 40%;
    }

    .form__group .group__text label+input,
    .form__group .group__text #group__select>select {
        width: 100%;
        outline: none;
        border: 1px solid black;
        font-size: .9em;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .form__group .group__text #group__select>select {
        -webkit-appearance: none;
    }

    #group__select {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #group__select:before {
        content: "";
        position: absolute;
        top: 16px;
        right: 10px;
        border: 8px solid;
        border-color: black transparent transparent transparent;
        pointer-events: none;
    }

    .group__about {
        display: flex;
        flex-direction: column;
    }

    .about__radios {
        width: 100%;
        height: 230px;
    }

    .about__radios p {
        font-weight: bold;
    }

    label[for="termos"]>a {
        color: #00a1ff;
    }

    label[for="termos"],
    #termos {
        font-size: .83em;
        margin-bottom: 10px;
    }

    .options__submit {
        width: 100%;
        padding: 8px 10px;
        font-size: 15px;
        border: 0;
        background: #00a1ff;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
    }

    .options__submit:hover {
        background: rgba(0, 162, 255, 0.856)
    }


    /* Três botões */
    .section__radio {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

    .radio__group {
        list-style: none;
    }

    .radio__group li {
        display: inline-block;
        margin: 0px 10px;
    }

    .radio__input {
        cursor: pointer;
        appearance: none;
        width: 29px;
        height: 29px;
        border: 3px solid #00a1ff;
        border-radius: 50%;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        outline: none;
    }

    .radio__input:before {
        content: '';
        width: 19px;
        height: 19px;
        background: #00a1ff;
        border-radius: 50%;
        opacity: 0;
        transition: all 600ms ease-in-out;
        position: absolute;
    }

    .radio__input:checked:before {
        opacity: 1;
    }

    .radio__input:focus {
        box-shadow: 0 0 5px #00a1ff;
    }

    .radio__span-one:before,
    .radio__span-one:after {
        content: ' ';
        position: absolute;
        left: 37px;
        width: 17%;
        border-top: 5px solid #00a1ff;
        margin-top: -10.3%;
    }

    .radio__span-two:before,
    .radio__span-two:after {
        content: ' ';
        position: absolute;
        left: 91px;
        width: 17%;
        border-top: 5px solid #00a1ff;
        margin-top: -10.3%;
    }

    input[type="radio"],
    input[type="checkbox"] {
        accent-color: #0080C9;
    }

    /* Responvidade */
    @media only screen and (max-width: 1700px) {
        .section__form {
            width: 80%;
        }
    }

    @media only screen and (max-width: 1530px) {
        label[for="termos"] {
            font-size: .86em;
            vertical-align: 1px
        }
    }
    @media only screen and (max-width: 1440px) {
        .section__form {
            width: 90%;
        }

        #cadastro__section div img {
            width: 300px;
        }
        .form__group{
            font-size: 14px;
        }
    }

    @media only screen and (max-width: 1110px) {
        .form__group {
            justify-content: space-evenly;
        }

        label[for="termos"] {
            font-size: .8em;
        }
    }

    @media only screen and (max-width: 1140px) {
        aside{
            display: none;
        }
        .section__form {
            width: 80%;
            margin-top: 5%;
        }

        #cadastro__section {
            flex-direction: column-reverse;
            margin-top: 2%;
        }

        .section__radio {
            top: 94.5%;
        }

        label[for="termos"] {
            font-size: .85em;
        }

        #cadastro {
            font-size: 0.88em;
        }
    }

    @media screen and (max-width:800px) {
        .section__form {
            width: 95%;
            margin: 0 10px;
        }

        .form__group {
            justify-content: center;
        }

        .group__text {
            margin-right: 20px;
        }
    }
    @media screen and (max-width:670px){
        .form__group {
            flex-direction: column;
        }
        #cadastro__section div img {
            display: none;
        }
        .section__form {
            height: 85%;
        }
        .group__text,.group__about  {
            width: 90%;
        }
        .radio__span-two:before, .radio__span-two:after{
            width: 15%;
        }

    }
    @media screen and (max-width:670px){
        #cadastro {
            font-size: 0.75em;
        }
        #cadastro__section{
            height: 100%;
        }
        .radio__span-two:before, .radio__span-two:after{
            width: 13%;
        }
        .about__radios {
            height: 100%;
        }
        .radio__input {
            width: 20px;
            height: 20px;
        }
        .radio__span-two:before, .radio__span-two:after,.radio__span-one:before, .radio__span-one:after{
            content: ' ';
            left: 30px;
            width: 17%;
            border: 1px solid #00a1ff;
            margin-top: -8.3%;
        }
        .radio__span-one:before, .radio__span-one:after{
            left: 73px;
        }
        .section__radio{
            display: none;
        }
    }




    @media screen and (max-height:880px) {
        .section__form {
            height: max-content;
        }
        .section__radio{
            bottom: 0%;
        }
    }



    @media screen and (max-height:750px) {
        #cadastro__section{
            align-items: flex-start;
        }


    }

    @media screen and (max-width:2000px) and  (max-height:690px) {
        .section__radio {
            bottom: -20%;
        }
    }



    @media screen and (max-width:1050px) and  (max-height:650px) {
        #cadastro{
            height: 110vh;
        }
    }

    @media screen and (max-width:400px) and  (max-height:770px) {
        #cadastro{
            height:100vh;
        }
    }

    /* Tag gerals */...    Text is not SVG - cannot display         ONG
    #subTitle {
        text-align: center;
    }

    #main-ong {
        width: 100%;
        max-height: max-content;
    }

    .section__ong {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        font-size: 1em;
    }

    #dvSlider {
        display: none;
    }

    ul {
        list-style: none;
    }

    .ong__imagens {
        width: 30%;
    }

    .ong__informations {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        margin-top:-9%;
    }

    .ong__imagens #imagens__container .container__item img {
        width: 300px;
        display: block;
        margin: 0 auto;
    }

    .ong__imagens #imagens__container .container__item+.container__item {
        margin-top: 40px;
    }

    .informations__description {
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #description__container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .informations__description h1 {
        font-size: 1.3em;
    }

    .informations__description span {
        font-size: 1em;
        font-weight: bold;
    }

    .informations__description p {
        font-weight: 500;
        text-align: justify;
        font-size: 1em;
    }

    #description__social {
        display: block;
        width: 100%;
    }

    #description__social .social__item {
        display: inline;
    }

    #description__social .social__item a img {
        width: 35px;
    }

    .informations__botons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }



    .informations__botons > .informations__donation > input[type='button'],
    .informations__botons button {
        background-color: #00a1ff;
        border: #00a1ff solid 1px;
        padding: 5px 10px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bolder;
    }

    .informations__botons > .informations__donation > input[type='button'] {
        width: 200px;
        padding: 10px;
        margin-right: -12%;
    }

    .informations__donation {
        margin-bottom: 20px;
    }

    .informations__comments {
        display: flex;
        justify-content: space-between;
        align-items: left;
        width: 100%;
    }
    #comments {
        width: 82%;
        resize: none;
        border: 1px solid black;
    }
    #comments::placeholder{
        padding-top: 2px;
        padding-left: 5px;
    }
    .buttons__container {
        width: 17%;
        margin-left: 50px;
    }

    .buttons__container button {
        width: 100%;
        display: block;
        margin: 0 auto;
        font-weight: bold;
    }

    .buttons__container button+button {
        margin-top: 20px;
    }

    .buttons__container button img {
        width: 15px;
    }

    .buttons__container button p {
        display: inline;
        vertical-align: 5px;
    }

    /* Responsividade */
    @media screen and (max-width:1700px) {
        .buttons__container {
            margin-left: 10px;
        }
    }

    @media screen and (max-width:1500px) {
        #comments {
            width: 80%;
        }

        .buttons__container {
            margin-left: 5px;
        }
    }

    @media screen and (max-width:1300px) {
        .section__ong {
            justify-content: space-evenly;
        }
    }

    @media screen and (max-width:1025px) {
        .section__ong {
            flex-direction: column;
            margin-top: 70px;
            height: 100vh;
        }

        .ong__imagens {
            width: 100%;
        }

        .ong__imagens #imagens__container .container__item+.container__item {
            margin: 0;
            margin-left: 30px;
        }

        .ong__imagens #imagens__container .container__item img {
            width: 500px;
            height: 300px;
        }

        .ong__informations {
            width: 100%;
            padding: 50px;
            margin: 0%;
            margin-bottom: 50px;
        }

        .informations__comments {
            justify-content: space-around;
        }

        .container__subtle {
            margin: 50px 0px;
        }

        .container__subtle+.section__cards {
            margin: 20px auto;
        }

        /* Criar carrossel */
        #dvSlider {
            display: block;
        }

        #dvSlider {
            width: 90vw;
            height: 450px;
            border: 1px solid black;
            margin: 0 auto;
            background-size: cover;
            background-position: center;
            transition: .5s background ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-image: url('../imgs/fotosOng/fotos01.jpg');
        }

        .btSlider {
            background-color: #00a1ff;
            width: 50px;
            height: 70px;
            color: #fff;
            cursor: pointer;
            outline: none;
            margin: 10px;
            border: none;
        }


        #imagens__container {
            display: flex;
            padding: 20px;
            display: none;

            /*        
     */
        }
    }

    @media screen and (max-width:800px) {
        .section__ong {
            margin-top: 120px;
        }
    }

    @media screen and (max-width:650px) {
        .section__ong {
            height: 115vh;
            font-size: 13px;
            margin-top: 50px;
        }

        #dvSlider {
            display: none;
        }

        .informations__botons {
            align-items: center;
        }

        #imagens__container {
            display: flex;
            padding: 20px;
            position: relative;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }
        .ong__informations {
            margin: 0%;
            margin-bottom: 50px;
        }
        .informations__comments {
            flex-direction: column;
        }

        #comments,
        .buttons__container {
            width: 100%;
        }

        .buttons__container {
            margin: 0;
            margin-top: 10px;
            display: flex;
        }

        .buttons__container button+button {
            margin-top: 0px;
        }

        .buttons__container button {
            width: 40%;
            padding: 10px;
            font-size: 1.05em;
        }

        .informations__botons > .informations__donation >  input[type='button'] {
            padding: 13px;
            font-size: 1.05em;
        }
        #subTitle {
            text-align: center;
            margin-top: 30px;
        }
        .informations__description h1 {
            margin-bottom: 10px;
        }

        .informations__description span {
            display: block;
            margin: 10px 0px;
        }

        .section__cards .card {
            margin: 0 5px 30px 0;
        }

        .container__subtle {
            margin: 13% 0px 10%;
        }
    }

    @media screen and (max-width:470px) {
        .ong__imagens #imagens__container .container__item img {
            width: 300px;
            height: 200px;
        }

        .ong__informations {
            padding: 50px 15px;
        }

        .section__ong {
            margin-top: 10%;
        }

        .informations__description h1 {
            font-size: 1.3em;
        }
    }

    @media screen and (max-width:400px) {
        .section__ong {
            margin-top: 30%;
        }

        .ong__informations {
            margin: 5%;
        }

        .informations__description {
            height: 100%;
        }

        .container__subtle {
            margin: 50% 0px 10%;
        }
    }


    #subTitle {...    Text is not SVG - cannot display         CARD
    @import url(style__ong.css);

    .section__cards{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 20vw;
    }
    .card{
        display: block;
        margin:0 30px 30px 0;
        padding-bottom: 10px;
        width: 200px;
        border-radius: 7px;
        box-shadow:0px 5px 10px rgba(0, 0, 0, 0.226);
        transition: 0.7s;
    }
    a:hover .card{
        box-shadow:0px 3px 15px rgba(0, 0, 0, 0.550);
        transition: 0.7s;
    }
    a .card h2{
        text-decoration: none;
    }
    .card a:-webkit-any-link{
        color: #000;
        text-decoration: none;
    }
    .card h2{
        padding: 5px 0px 7px 0px;
        margin-left: 7px;
        font-size: 0.8em;
        color: #000;
    }
    .img{
        border-radius: 7px 7px 0 0;
        width: 100%;
        padding: 20px 30px;
        display: flex;
    }
    .img{
        background-color: #00a1ff;
    }
    .img img{
        margin: 0 auto;
    }
    .card .button{
        background-color: #fff;
        font-size: 0.6em;
        border: rgb(86, 86, 86) 1px solid;
        padding: 2px 6px;
        border-radius: 2px;
        color: rgb(86, 86, 86);
        margin-left: 7px;
        transition: 0.7s;
    }
    .card .button:hover{
        background-color:rgb(86, 86, 86);
        color: #fff;
        cursor: pointer;
        transition: 0.7s;
    }
    @import url(style__ong.css);...    Text is not SVG - cannot display         Comentários
    .pos_botao{
        text-align: left;
        padding-top: 30px;
        padding-bottom: 5px;
    }

    .botao{
        text-align: right;
        text-decoration: dashed;
        margin-top: 80px;
        margin-left: 20px;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        border: #00a1ff solid 1px;
        background-color: #fff;
        color: #00a1ff;
    }

    .title{
        margin: 20px auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;

    }

    .botao:hover{
        color: #fff;
        background-color: #00a1ff;
        cursor: pointer;
    }

    .pos_editbotao{
        text-align: right;
        margin-top: -40px;
        margin-bottom: -10px;
    }

    .editbotao{
        text-align: right;
        text-decoration: dashed;
        margin-top: 10px;
        margin-left: 20px;
        padding: 5px;
        border-radius: 5px;
        border: #00a1ff solid 1px;
        background-color: #fff;
        color: #00a1ff;
    }

    .editbotao:hover{
        color: #fff;
        background-color: #00a1ff;
    }

    #coment_usuario{
        height: auto;
        border-top: 2px solid #ebebeb;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-right: 250px;
        padding-top: 10px;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .informations__description p {
        font-weight: normal;
        text-align: justify;
        font-size: 1em;
    }

    .coments{
        height: auto;
        border-top: 2px solid #ebebeb;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-right: 250px;
        padding-top: 10px;
        width:  100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .texto{
        width: 40vw;
        margin-left: 30px;
        text-align: justify;
    }

    #img-feed{
        width: 100px;
        border-radius: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .section__ong {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start !important;
        margin-top: 50px;
        font-size: 1em;
        justify-content: center;
    }

    .ong__imagens {
        width: 30%;
    }

    .ong__imagens #imagens__container .container__item img {
        width: 300px;
        display: block;
        margin: 0 auto;
    }

    .ong__imagens #imagens__container .container__item+.container__item {
        margin-top: 40px;
    }

    .secao_coments {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        padding-bottom: 50px;
    }

    .informations__description {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .informations__comments {
        display: flex;
        justify-content: space-between;
        align-items: left;
        width: 100%;
        padding-top: 50px;
    }
    #comments {
        width: 82%;
        resize: none;
        border: 1px solid black;
    }
    #comments::placeholder{
        padding-top: 2px;
        padding-left: 5px;
    }

    .buttons__container {
        width: 17%;
        margin-left: 50px;
    }

    .buttons__container button {
        width: 100%;
        display: block;
        margin: 0 auto;
        font-weight: bold;
    }

    .buttons__container button+button {
        margin-top: 20px;
    }

    .buttons__container button img {
        width: 15px;
    }

    .buttons__container button p {
        display: inline;
        vertical-align: 5px;
    }

    @media screen and (max-width:1025px){
        .texto{
            width: 70vw;
            margin-left: 30px;
            text-align: justify;
        }
        .secao_coments {
            width: 100%;
        }
        #dvSlider {
            position: relative !important;;
            margin-top: 50% !important;
        }
        #coment_usuario, .coments{
            padding-left: 20px;
        }
        footer{
            bottom: -250vh !important;
        }
        .informations__comments {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            flex-wrap: wrap;
            flex-direction: column;
        }
        #comments, .buttons__container {
            width: 90% !important;
        }
    }
    @media screen and (max-width:645px){
        h1{
            font-size: 2rem;
        }
        .ong__imagens {
            position: relative !important;;
            margin-top: 50% !important;
        }
        .informations__description{
            height: 0%;
        }
    }
    @media screen and (max-width:560px){
        .texto{
            width: 50vw;
            margin-left: 30px;
            text-align: justify;
        }
        h1{
            font-size: 1.5rem !important;
            padding: 0 10px;
        }
    }
    @media screen and (max-width:470px) {
        .ong__imagens #imagens__container .container__item img {
            width: 300px;
            height: 200px;
        }

        .ong__informations {
            padding: 50px 15px;
        }

        .section__ong {
            margin-top: 10%;
        }

        .informations__description h1 {
            font-size: 1.3em;
        }
    }

    @media screen and (max-width:400px) {
        .section__ong {
            margin-top: 30%;
        }

        .ong__informations {
            margin: 5%;
        }

        .informations__description {
            height: 100%;
        }

        .container__subtle {
            margin: 50% 0px 10%;
        }
    }

    .pos_botao{...    Text is not SVG - cannot display         Editar ONG
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /*  ----------------------- Estrutura da página --------------------------- */
    #edit {
        width: 100%;
        height: calc(100vh - 91px);
        margin: 0px auto;
        display: flex;
        place-content: center;
        background: #00a1ff;
        background-image: url('../imgs/iconswhite.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .edit__conteiner {
        width: 75%;
        height: 100%;
        display: flex;
        place-content: center;
        background: transparent;
    }

    /* Divisão de largura */
    .edit__options {
        background: #fff;
        width: 25%;
        height: auto;
        font-size: 1rem;
        text-align: center;
        border-right: 2px solid #00a1ff;
    }

    .edit__content {
        background: #fff;
        width: 70%;
        height: auto;
        font-size: 1rem;
    }

    /*  ----------------------- aside --------------------------- */
    .options__photos {
        display: block;
    }

    .options__photos img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .options__itens li {
        position: relative;
        padding: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.252);
        border-top: 1px solid rgba(255, 255, 255, 0.085);
    }

    .options__itens li>a {
        font-size: 20px;
    }

    .options__itens li:hover:before,
    .options__itens li:first-child::before {
        content: "";
        height: 100%;
        position: absolute;
        left: 0px;
        width: 5px;
        bottom: 0px;
        background-color: #00a1ff;
        border-radius: 0px 10px 10px 0px;
    }

    .options__item {
        text-decoration: none;
        color: black;
    }

    .options__item:hover {
        color: rgba(23, 23, 23, 0.92);
    }

    /*  ----------------------- main content --------------------------- */
    .edit__content {
        padding: 5px 30px 3px;
    }

    .edit__content h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .content__form label {
        font-size: 20px;
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .content__form input,
    .content__form textarea {
        width: 100%;
        padding: 14px;
        border-radius: 5px;
        border: .4px solid black;
        font-size: 16px;
    }

    .content__form input+label {
        margin-top: 25px;
    }

    #Sobre {
        resize: vertical;
        min-height: 200px;
        max-height: 350px;
    }

    /* Colocar o botão no final */
    .form__button {
        width: 100%;
        text-align: center;
    }

    .content__form button {
        padding: 15px;
        border: 0;
        border-radius: 20px;
        background-color: #00a1ff;
        border: #00a1ff solid 1px;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        transition: all .3s ease-in-out;
    }

    .content__form button:hover {
        transform: scale(1.03);
        background-color: #069df5db;
    }

    /* @media (max-height: 1000px) {
        .edit__conteiner {
            height: calc(100vh - 91px);
        }
    } */
    * {...    Text is not SVG - cannot display         Excluir
    @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

    body {
      /* solid background */
      background: rgb(0,212,255);
     
      /* gradient background*/
      background: linear-gradient(45deg, rgba(0,212,255,1) 0%, rgba(11,3,45,1) 100%);    
     
      /* photo background */
      background-image: url(../imgs/fundo.png);
      background-size: cover;
      background-position: center;  
     
      display: flex;
      align-items: center;
      justify-content: center;    
      height: 100vh;  
    }

    .container {
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      background-color: rgba(17, 25, 40, 0.25);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.125);  
      padding: 38px;  
      filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content:center;
      text-align: center;
     
    }

    .wrapper {
      width: 100%;
      height: 100%;
     
    }

    .banner-image {
      background-image: url(../imgs/doadores-maos-ong.jpg);
      background-position: center;
      background-size: cover;
      height: 300px;
      width: 100%;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255, 0.255)
    }

    h1{
      font-family: 'Righteous', sans-serif;
      color: rgba(255,255,255,0.98);
      text-transform: uppercase;
      font-size: 2.4rem;
    }

    p {
      color: #fff;
      font-family: 'Lato', sans-serif;
      text-align: center;
      font-size: 0.8rem;
      line-height: 150%;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .button-wrapper{
      margin-top: 18px;
    }

    .btn {
      border: none;
      padding: 12px 24px;
      border-radius: 24px;
      font-size: 12px;
      font-size: 0.8rem;  
      letter-spacing: 2px;  
      cursor: pointer;
    }

    .btn + .btn {
      margin-left: 10px;
    }

    .outline {
      background: rgb(246, 4, 4);
      color:white;
      border: 1px solid rgba(0, 212, 255, 0.6);
      transition: all .3s ease;
     
    }

    .outline:hover{
      transform: scale(1.125);
      color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 255, 0.9);
      transition: all .3s ease;  
    }

    .fill {
      background: rgba(0, 212, 255, 0.9);
      color: rgba(255,255,255,0.95);
      filter: drop-shadow(0);
      font-weight: bold;
      transition: all .3s ease;
    }

    .fill:hover{
      transform: scale(1.125);  
      border-color: rgba(255, 255, 255, 0.9);
      filter: drop-shadow(0 10px 5px rgba(0,0,0,0.125));
      transition: all .3s ease;    
    }

    @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');...    Text is not SVG - cannot display         Favoritos Usuário
    #main__fav {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    /* Texto das páginas */
    .fav__text {
        text-align: center;
    }

    .fav__text>h1 {
        font-size: 40px;
        margin-bottom: 30px;

    }

    .fav__text>p {
        font-size: 18px;
        margin-bottom: 30px;
    }

    /* Filtros */

    .fav__options {
        min-width: 70vw;
        max-width: 100vw;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }

    .fav__options select {
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.226);
        font-size: 20px;
        padding: 5px 10px;
        cursor: pointer;
        height: 55px;
        border-radius: 5px;
    }

    .fav__options select>optgroup {
        border: 0;
        cursor: pointer;
    }

    .fav__options select>optgroup>option {
        line-height: 1;
        cursor: pointer;
    }

    .fav__options select+select {
        margin-left: 20px;
    }

    .options__search {
        position: relative;
        height: 55px;
        max-width: 350px;
        width: 100%;
        margin: 0 30px;
        border-radius: 5px;
        background-color: #fff;
        display: inline-block;
    }

    .fav__options .options__search input {
        position: relative;
        font-size: 20px;
        border-radius: 5px;
        height: 100%;
        width: 100%;
        padding: 0 15px 0px 65px;
        outline: none;
        color: #333;
    }

    .fav__options .options__search .search__icon__container {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fav__options .options__search .search__icon__container .search__icon {
        width: 20px;
        height: 20px;
    }

    /* Elementos */

    .fav__cards {
        margin-top: 50px;
    }

    .fav__cards .cards__title {
        margin-bottom: 30px;
    }

    .fav__cards h2 {
        text-align: center;
    }


    .card__conteiner {
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        justify-items: center;
        gap: 30px;
        /* grid-template-columns: repeat(4, minmax(200px, 1fr))*/
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-flow: row;
    }


    .card {
        position: relative;
        margin: 0;
        display: inline-block;
    }

    .item-custom{
        grid-column: span 2;
    }

    .card__remove {
        background-color: #fff;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        right: 5px;
        top: 5px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.226);
        transition: all .5s ease-in-out;
    }

    .card__remove img {
        width: 25px;
        height: 25px;
        transition: all .5s ease-in-out;
    }

    .card__remove:hover {
        filter: invert(1);
    }

    .card__remove:hover img {
        transform: rotate(360deg);
    }

    @media screen and (max-width:500px){
        .options__select{
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }
        .fav__options select+select {
            margin: 10px 0px 0px;
        }
        .item-custom {
            grid-column: span 1;
        }
        .fav__options select {
            font-size: 12px;
            height: auto;
            padding: 5px;
        }
        .options__search{
            max-width: 290px;
            height: 40px;
           
        }
        .fav__options .options__search input{
            font-size: 12px;
        }
           
        .fav__options .options__search .search__icon__container .search__icon{
            width: 15px;
            height: 15px;
        }
    }
    #main__fav {...    Text is not SVG - cannot display         Feed
    img{
        border-radius: 20px;  
    }

    img:hover{
        opacity: 0.7;
        transition: 0.9s;
    }

    #main-feed{
        display: block;
        position: relative;
        justify-content: left;
        margin: 20px 18vw 20px 18vw;
    }

    .img-feed{
        width: 300px;
        height: 200px;
        display: flex;
        margin: 20px;
        border-radius: 20px;
    }

    .artigo{
        height: 270px;
        border-top: 2px solid #ebebeb;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width:  100%;
        justify-content: center;
        padding: 5px;
        margin-top: 20px;
    }

    .texto{
        width: 50vw;
        margin: 20px;
        text-align: justify;
    }

    .pos_botao{
        text-align: right;
        padding-right: 1px;
    }

    .botao{
        text-align: right;
        text-decoration: dashed;
        margin-top: 80px;
        margin-left: 20px;
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        border: #00a1ff solid 1px;
        background-color: #00a1ff;
        color: white;
    }

    .botao:hover{
        color: #00a1ff;
        background-color: #fff;
        cursor: pointer;
    }

    #post{
        padding-top: 25px;
        display: block;
    }

    #img_post{
        width: 100px;
        border-radius: 100%;
        background-color: #23aeff;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transition: 0.7s;
    }

    #img_post:hover{
        width: 100px;
        border: #00a1ff solid 4px;
        border-radius: 100%;
        background-color: #fff;
        transition: 0.7s;
        opacity: 1;
        cursor: pointer;
    }

    .fav__options {
        min-width: 50vw;
        max-width: 100vw;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: 50px;
    }

    .fav__options select {
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.226);
        font-size: 20px;
        padding: 5px 10px;
        cursor: pointer;
        height: 55px;
        border-radius: 5px;
    }

    .fav__options select>optgroup {
        border: 0;
        cursor: pointer;
    }

    .fav__options select>optgroup>option {
        line-height: 1;
        cursor: pointer;
    }

    .fav__options select+select {
        margin-left: 20px;
    }

    .options__search {
        position: relative;
        height: 55px;
        max-width: 350px;
        width: 100%;
        margin: 0 30px;
        border-radius: 5px;
        background-color: #fff;
        display: auto;
    }

    .fav__options .options__search input {
        position: relative;
        font-size: 20px;
        border-radius: 5px;
        height: 100%;
        width: 100%;
        padding: 0 15px 0px 65px;
        outline: none;
        color: #333;
    }

    .fav__options .options__search .search__icon__container {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fav__options .options__search .search__icon__container .search__icon {
        width: 20px;
        height: 20px;
    }
    /***********************************/
    @media screen and (max-width:1388px){
        /**********************/
        .principal{
            background-size: contain;
        }
    }
    @media screen and (max-width:1070px){
        /**********************/
        .botao{
            text-align: right;
            text-decoration: dashed;
            margin-top: 30px;
            margin-left: 20px;
            padding: 5px 5px 5px 5px;
            border-radius: 5px;
            border: #00a1ff solid 1px;
            background-color: #00a1ff;
            color: white;
        }
    }
    @media screen and (max-width:800px){
        /**********************/
        .principal{
            height: 300px;
        }
        #title-index{
            font-size: 1.2rem;
        }
        .busca{
            height: 250px;
            margin-top: 90px;
        }
        #main-feed{
            margin: 20px 10vw;
        }
       
        .artigo {
            height: 270px;
            border-top: 2px solid #ebebeb;
            display: contents;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            justify-content: center;
            padding: 20px;
            margin-top: 20px;
            margin: 10px auto;
        }
        .texto{
            width: 80vw;
            padding-bottom: 30px;
            border-bottom: 2px solid #ebebeb;
        }
    }
    @media screen and (max-width:750px){
        .principal{
            height: 300px;
        }
        .busca{
            width: 85vw;
        }
        #main-feed{
            margin: 20px 10vw;
        }
        .artigo{
            display: hidden;
        }
        .texto{
            display: hidden;
        }
    }
    @media screen and (max-width:530px){
        #title-index{
            font-size: 1rem;
        }
        .principal{
            height: 350px;
        }
        #main-feed{
            margin: 20px 10vw;
        }
        .texto{
            display: hidden;
        }
    }

    img{...    Text is not SVG - cannot display         Formulario Visita
    main{
        background-color: #00a1ff;
        background-image: url(../imgs/iconswhite.svg);
        height: max-content;
        display: flex;
        justify-content: center;
    }
    section{
        width: 70vw;
        background-color: #fff;
        margin-top: 2vh;
        margin-bottom: 2vh;
        display: flex;
        text-align: center;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.561);
        flex-direction: column;
    }
    section h1{
        margin-top: 30px;
    }
    .padrao{
        margin-top: 20px;
        background-color: rgb(221, 221, 221);
        padding: 20px;
        border-radius: 5px;
        padding-right: 15vw;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.139) inset;
    }
    form{
        text-align: left;
    }
    form label::before{
        content: "* ";
        color: #00a1ff;
    }
    form label{
        font-size: 0.80em;
        margin-bottom: 5px;
        font-weight: bold;
    }
    form input, select{
        width: 300px;
        height: 35px;
        margin: 5px 0;
        font-size: 0.80em;
        padding: 5px;
        border-radius: 3px;
        background-color: none;
        border:rgb(49, 49, 49) solid 1px;
    }
    form textarea{
        border: 1px solid #484848;
        width: 300px;
        height: 100px;
        padding-left: 5px;
        border-radius: 5px;
        resize: none;
        margin-bottom: 10px;
    }
    .radio{
        display: flex;
    }
    .radio input{
        margin-right: 5px;
        width: 15px;
        height: 15px;
    }
    #adicionar{
        display: flex;
    }
    .add{
        margin-top: 30px;
        display: flex;
        align-items: baseline;
        margin-bottom: 100px;
    }
    .editar{
        display: flex;
        flex-direction: column;
        margin-right: 20px;
    }
    .editar input{
        border: none;
        border-bottom: 1px solid #484848;
        color: #484848;
        background-color: #ebebeb;
        height: 30px;
        width: 300px;
        font-size: 1.4rem;
        padding-left: 5px;
        margin-bottom: 10px;    
    }
    .inputs{
        display: flex;
        align-items: center;
    }
    .exemplos input[type="text"]{
        border: none;
        border-bottom: 1px solid #484848;
        color: #484848;
        background-color: #ebebeb;
        height: 25px;
        width: 200px;
        font-size: 1rem;
        padding-left: 5px;
        margin: 10px 5px;
    }
    .exemplos input[type="radio"]{
        width: 20px;
        height: 20px;
    }
    .exemplos input:focus{
        border: none;
        background-color: #e3e3e3;
        border-bottom: 1px solid #2f2f2f;
        box-shadow: 0 0 0 0;
        outline: 0;
    }
    .editar input:focus{
        border: none;
        background-color: #e3e3e3;
        border-bottom: 1px solid #2f2f2f;
        box-shadow: 0 0 0 0;
        outline: 0;
    }
    .editar textarea{
        border: 1px solid #484848;
        width: 300px;
        height: 100px;
        padding-left: 5px;
        border-radius: 5px;
        resize: none;
        margin-bottom: 10px;
    }
    .editar textarea:focus{
        outline: 0;
    }
    option{
        height: 30px;
        padding: 15px;
    }
    option:hover{
        background-color: #2f2f2f;
    }
    .btns{
        display: flex;
    }
    .new{
        border: 2px solid #2f2f2f;
        background-color: #e3e3e3;
        color: #2f2f2f;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
        transition: 0.7s;
        padding: 5px 10px;
        margin-right: 10px;
    }
    .new:hover{
        background-color: #2f2f2f;
        color: #e3e3e3;  
        transition: 0.7s;  
    }
    .save{
        padding: 5px 10px;
        font-size: 15px;
        border: 0;
        background: #00a1ff;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
        transition: 0.7s;
    }
    .save:hover {
        background: rgba(0, 162, 255, 0.856);
        transition: 0.7s;
    }

    @media screen and (max-width:960px){
        #adicionar {
            display: flex;
            flex-direction: column;
        }
        .padrao{
            padding: 20px 5vw;
        }
    }
    @media screen and (max-width:550px){
        section{
            width: 100vw;
        }
    }

    main{...    Text is not SVG - cannot display         Header
    @import url(style_card.css);

    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #acessibilidade{
        height: 26px;
        line-height: 18px;
        width: 100%;
        background-color: #ebebeb;
        color:#43555f ;
    }
    #acessibilidade a{
        color: #43555f;
    }
    #atalhos li{
        padding: 0 10px;
        list-style:none;
        display: inline;
    }
    #atalhos li a{
        text-decoration: none;
        transition: 0.5s;
    }
    #atalhos li a:hover{
        color: #000;
        transition: 0.5s;
    }
    .fonte, .contraste,#pgacess {
        float: right;
    }
    #atalhos{
        padding:5px 4.5% 5px 4.5%;
    }
    .fonte, #pgacess, .atalho{
        font-size: 0.85rem;
    }
    .contraste{
        font-size: 1.7rem;
        line-height: 9px;
    }
    .s{
        font-size: 1.05rem;
        line-height: 15px;
    }
    .acess{
        display: none;
    }
    nav{
        display: flex;
        margin:0 5%;
        justify-content: space-between;
        font-size: 0.9em;
    }
    nav img{
        float:right;
    }
    nav ul{
        float:left;
        display: flex;
        list-style: none;
        align-items: center;
        z-index:99;
    }
    .links{
        margin: 0 10px;
        height: 60px;
        padding: 20px 0;
    }
    .links a{
        text-decoration: none;
        color: #000;
        height: 60px;
    }
    .links ul{
        position: absolute;
        top: 89px;
        display: none;
        background-color: #00a1ff;
        margin: 0;
    }
    /**Exibe submenu**/
    .links:hover ul{
        display: block;
    }
    .links li{
        padding: 10px 0;
    }
    .links ul li{
        margin: 2px 0;
        width: 155px;
        display: block;
        padding: 5px 0 5px 7px;
        transition: 0.7s;
        border-bottom: rgba(255, 255, 255, 0.45) solid 1px;
    }
    .links ul li:last-child{
        border-bottom: none;
    }
    .links ul li a:hover{
        padding-left: 7px;
        transition: 0.7s;
    }
    .links ul li a{
        color: #fff;
        transition: 0.7s;
    }
    .botão a{
        background-color: #00a1ff;
        border: #00a1ff solid 1px;
        padding: 5px 10px;
        color: #fff;
        border-radius: 5px;
        transition: 0.7s;
    }
    .botão a:hover{
        border: #00a1ff solid 1px;
        color: #00a1ff;
        background-color: #fff;
        transition: 0.7s;
    }
    label img{
        border-radius: 5px;
        margin: 10px 0;
        background-color: #00a1ff;
        padding: 5px;
    }
    label[for="bt_menu"]{
        display: none;
    }
    #bt_menu{
        display: none;
    }
    /*footer*/
    footer{
        background-color: rgb(192, 192, 192);
        color: rgb(84, 84, 84);
        bottom:0;
        width: 100%;
        padding: 5px 0;
        text-align: center;
        font-size: 0.6em;
        position:relative;
    }


    /***********************************/
    @media screen and (max-width:859px){
        /*tirar menu*/
        #menu{
            display: none;
        }
        label[for="bt_menu"]{
            display: block;
            float: right;
        }
        #acessibilidade{
            display: none;
        }
        #bt_menu:checked ~ #menu{
            display: block;
            background-color: #00a1ff;
            position: absolute;
            width: 100%;
            right: -5px;
            top:63px;
            padding-bottom: 10px;
            height: 330px;
            z-index: 9999;
        }
        .acess{
            display: block;
        }
        .botão a{
            background-color: none;
            border: none;
            color: #fff;
            border-radius: none;
            height: 60px;
            padding: 20px 0;
            text-align: left;
        }
        .botão{
            height: 30px;
            margin-top: 20px;
        }
        .botão a{
            background-color: none;
            border: none;
            padding: 0;
            color: #fff;
            border-radius: 0;
            transition: 0.7s;
        }
        .botão a:hover{
            background-color: #00a1ff;
            border: none;
            padding: 0;
            color: #fff;
            border-radius: 0;
            transition: 0.7s;
        }
        #menu li{
            position: relative;
            float: center;
        }
        #menu .links:nth-child(1):hover ~ .links:nth-child(2){
            margin: 20px 10px;
        }
        #menu .links:nth-child(1):hover ~ .links:last-child{
            padding-top: 0;
        }
        .login a:hover{
            text-decoration: none;
        }
        .links a{
            color: #fff;
        }
        #menu li ul{
            position: static;
        }
        #menu li ul li{
            position: relative;
            float: left;
            display: block;
            border: 0;
           
        }
    }
    @media screen and (max-width:750px){
        .principal{
            height: 500px;
        }
    }
    @media screen and (max-width:530px){
        h1{
            font-size: 1rem;
        }
    }

    /* MUDAR CADASTRO */
    .cadastros{
        bottom: 0;
        right:0;
        position: fixed;
        z-index: 999;
        display: flex;
        text-align: center;
        flex-direction: column;
    }
    .cadastros .link{
        box-shadow: 0px 0px 1.2px 0px #aeaeae;
        background-color: #fdfdfd;
        padding: 5px 10px;
        transition: 0.7s;
    }
    .cadastros .link:hover{
        background-color: #a5e2ff;
        cursor: pointer;
        transition: 0.7s;
    }
    .cadastros .link:hover a{
        color: #00a1ff;
        transition: 0.7s;
    }
    .cadastros .ativado:hover{
        box-shadow: 0px 0px 1.2px 0px #aeaeae;
        background-color: #00a1ff;
    }
    .cadastros .ativado:hover a{
        text-decoration: none;
        color: #fff;
    }
    .cadastros .link i{
        margin-right: 5px;
    }
    .cadastros .link a{
        text-decoration: none;
        color: #222222;
    }
    .cadastros .ativado{
        box-shadow: 0px 0px 1.2px 0px #aeaeae;
        background-color: #00a1ff;
    }
    .cadastros .ativado a{
        text-decoration: none;
        color: #fff;
    }
    @media screen and (max-width:890px) {
        .cadastros{
            bottom: 50px;
            position: fixed;
            z-index: 999;
            display: flex;
            text-align: center;
            flex-direction: row;
            left: 92vw;
            transform: rotate(270deg);
        }
    }
    @import url(style_card.css);...    Text is not SVG - cannot display         Home
    /*Banner*/
    .principal{
        background-image: url(../imgs/Rectangle\ 26.png);
        padding-top:10px ;
        width: 100%;
        height: 420px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #title-index{
        padding: 0 10px;
    }
    .busca{
        background-color: #fff;
        text-align: center;
        border-radius: 20px 20px 0 0;
        padding-top:30px;
        width: 70vw;
        height: 200px;
        margin: 0 auto;
        margin-top: 250px;
    }
    .buscador{
        display:inline-flex;
        position: relative;
        flex-wrap: wrap;
        padding: 0 30px;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
        background-color: none;
    }
    .search{
        background-color: #00a1ff;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .search img{
        margin-left: 1px;
        margin-top: 5px;
        width: 27px;
        height: 27px;
    }
    .buscador select{
        background-color: #fff;
        height: 40px;
        width:250px;
        padding-left: 5px;
        color: rgb(46, 46, 46);
        border: #000 solid 1px;
        border-radius: 3px;
        margin-right: 7px;
        margin-bottom: 5px;
    }
    #main-index{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 20vw;
    }
    /*cards*/
    .card{
        display: block;
        margin:0 30px 30px 0;
        padding-bottom: 10px;
        width: 200px;
        border-radius: 7px;
        box-shadow:0px 5px 10px rgba(0, 0, 0, 0.226);
        transition: 0.7s;
    }
    a:hover .card{
        box-shadow:0px 3px 15px rgba(0, 0, 0, 0.550);
        transition: 0.7s;
    }
    a .card h2{
        text-decoration: none;
    }
    .card a:-webkit-any-link{
        color: #000;
        text-decoration: none;
    }
    .card h2{
        padding: 5px 0px 7px 0px;
        margin-left: 7px;
        font-size: 0.8em;
        color: #000;
    }
    .img{
        border-radius: 7px 7px 0 0;
        width: 100%;
        padding: 20px 30px;
        display: flex;
        background-color: #00a1ff;
    }
    .img img{
        margin: 0 auto;
    }
    .card .button{
        background-color: #fff;
        font-size: 0.6em;
        border: rgb(86, 86, 86) 1px solid;
        padding: 2px 6px;
        border-radius: 2px;
        color: rgb(86, 86, 86);
        margin-left: 7px;
        transition: 0.7s;
    }
    .card .button:hover{
        background-color:rgb(86, 86, 86);
        color: #fff;
        cursor: pointer;
        transition: 0.7s;
    }
    /***********************************/
    @media screen and (max-width:1388px){
        /**********************/
        .principal{
            background-size: contain;
        }
    }
    @media screen and (max-width:800px){
        /**********************/
        .principal{
            height: 300px;
        }
        #title-index{
            font-size: 1.2rem;
        }
        .busca{
            height: 250px;
            margin-top: 90px;
        }
        #main-index{
            margin: 20px 10vw;
        }
    }
    @media screen and (max-width:750px){
        .principal{
            height: 300px;
        }
        .busca{
            width: 85vw;
        }
        #main-index{
            margin: 20px 10vw;
        }
    }
    @media screen and (max-width:530px){
        #title-index{
            font-size: 1rem;
        }
        .principal{
            height: 350px;
        }
    }
    /*Banner*/...    Text is not SVG - cannot display         Login
    nav{
        border-bottom:rgba(128, 128, 128, 0.407) 1px solid;
    }
    #main-login{
        display: flex;
        flex-wrap: wrap;
        height: 87vh;
        justify-content:space-between;
        align-content: center;
        align-items: center;
    }
    #main-login section{
        float: left;
    }
    .imagem{
        background-color: #00a1ff;
        height: 87vh;
        width: 50vw;
        padding-top: 50px;
    }
    .imagem img{
        height: 100%;
    }
    #main-login aside{
        padding-top: 100px;
        float:right;
        padding-left: 0;
        margin-right: 15vw;
    }
    #main-login aside input:not(#lembrar){
        width: 250px;
        height: 30px;
        margin: 5px 0;
        font-size: 0.81em;
    }
    #main-login aside p{
        margin-bottom: 15px;
    }
    #main-login aside a{
        font-size: 0.81em;
        color:#00a1ff;
        float:right;
    }
    #main-login aside label[for="lembrar"]{
        font-size: 0.81em;
        justify-content: baseline;
    }
    #entrar{
        cursor: pointer;
        background-color: #00a1ff;
        color: #fff;
        border: #00a1ff;
        border-radius: 5px;
        transition: 0.5s;
    }
    #entrar:hover{
        border: #00a1ff solid 1px;
        color: #00a1ff;
        background-color: #fff;
        transition: 0.5s;
    }
    #google{
        cursor: pointer;
        border-radius: 5px;
        background-color: #000;
        border: solid 1px #000;
        color: #fff;
        padding: 2px 0;
        width: 250px;
        height: 30px;
        margin: 5px 0 100px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        font-size: 0.81em;

    }
    #google:hover{
        background-color: #fff;
        border: solid 1px gray;
        color: rgb(37, 37, 37);
        transition: 0.5s;
    }
    #google img{
        width: 20px;
        padding-right: 5px;
    }
    .cadastro{
        margin-left: 0px;
        font-size: 0.81em;
    }
    .cadastro a{
        float: none;
    }

    @media screen and (max-width:950px){
        #main-login section{
            display: none;
        }
        #main-login aside{
            margin: 0 auto;
            border: 0;
            padding: 0;
        }
    }
    nav{...    Text is not SVG - cannot display         Moderador
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /*HEADER*/

    .container_form {
        width: 60vw;
        margin: auto;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        background:#ffffff;
        box-shadow: 0px 0px 1.2px 0px #aeaeae;
        border-radius:3px;
        padding:3em;

    }

    .container_form h1 {
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2.3em;
        color: #00a1ff;
        border-bottom: 1px #f0eded solid;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .form_grupo {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
        position: relative;
    }

    .form_grupo .legenda, label:not(.check_label) {
        width: 100%;
        float: left;
        margin-top: 15px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    /* SUBMIT */

    .submit { width:100%; float:left; }

    .submit_btn {
        float: left;
        display: block;
        padding: 5px 30px;
        border: none;
        outline: none;
        background-color: #00a1ff;
        color: #fff;
        font-family: inherit;
        font-size: 25px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 6px;
        margin: 20px auto;
        cursor: pointer;
        transition: all 0.3s;
    }

    .submit_btn:hover {
        background-color: #444444;
        transform: scale(1.03);
    }

    .dropdown {
        display: block;
        margin: 0 auto;
        font-size: 16px;
        font-family: inherit;
        color: #222222;
        border-radius: 4px;
        border: 1px #f2f2f2 solid;
        background: #fdfdfd;
        outline: none;
        padding-left: 10px;
        width: 100%;
    }

    .form_new_input {
        display: none;
    }

    .radio_label,
    .check_label {
        float: left;
        width: 100%;
        padding-left: 30px;
        cursor: pointer;
        margin-bottom: 8px;
    }
    .inputsenha{
        display: inline-flex;
        align-items: center;
    }

    .options__checkbox {
        display: inline-flex;
        align-items: baseline;
        margin-top: 10px;
    }

    .inputsenha input[type="password"]{
        width: 50%;
        height: 40px;
    }
    .inputsenha input{
        margin-right: 10px;
    }
    .confirm_btn{
        padding: 9px 30px;
        border: none;
        outline: none;
        background-color: #00a1ff;
        color: #fff;
        font-family: inherit;
        font-size: 1rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 6px;
        margin: 10px auto;
        cursor: pointer;
        transition: all 0.3s;
    }
    .confirm_btn:hover{
        background-color: #444444;
        transform: scale(1.03);
    }
    .radio_new_btn {
        position: absolute;
        left: 0;
        transform: translateY(3px);
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 0.2em solid #4c4c4c;
    }

    .radio_new_btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #00a1ff;
        visibility: hidden;
    }

    .check_new_btn {
        position: absolute;
        left: 0;
        height: 20px;
        width: 20px;
        border: 0.2em solid #4c4c4c;
    }

    .check_new_btn::after {
        content: "";
        height: 8px;
        width: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #00a1ff;
        visibility: hidden;
    }

    .form_new_input:checked ~ .radio_label .radio_new_btn::after,
    .form_new_input:checked ~ .check_label .check_new_btn::after {
        visibility: visible;
    }

    .form_new_input:checked ~ .radio_label,
    .form_new_input:checked ~ .check_label {
        color: #6fcffb;
    }

    .form_grupo {
        width: 100%;
        margin-bottom: 20px;
        position: relative;
    }

    .form_label:not(.check_label):before  {
        content: "* ";
        color: #00a1ff;
    }

    .form_input {
        font-size: 16px;
        font-family: inherit;
        padding: 8px 15px;
        border-radius: 4px;
        border: 1px #f2f2f2 solid;
        background: #fdfdfd;
        outline: none;
        width: 100%;
        transition: all 0.3s;
    }

    .form_message,
    .form_message .message_input {
        width: 100%;
        float:left;
    }

    .form_message_label {
        width: 100%;
        float: left;
        margin-top: 15px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    /* Modificações do checkbox */
    .btn__container > .checkbox-input + .checkbox-label{
        display: inline;
        float: none;
        font-weight: initial;
        vertical-align: 5px;
        margin-left: 4px;
        cursor: pointer;
    }
    .btn__container > .checkbox-input{
        all: unset;
        border: 0.2em solid #4c4c4c;
        width: 15px;
        height: 15px;
        display: inline-block;
        box-shadow:inset 0px 0px 0px 3.5px #fff;
    }
    .btn__container > .checkbox-input:checked {
        height: 15px;
        width: 15px;
        background-color: #00a1ff;
    }
    .btn__container > .checkbox-input:checked +.checkbox-label{
        color: #00a1ff;
    }


    /*media query*/
    @media screen and (max-width:890px) {
        .container_form {
            width: 100vw;
            margin: auto;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            background:#ffffff;
            padding:3em;
        }
        .inputsenha{
            flex-wrap: wrap;
        }
        .inputsenha input[type="password"]{
            width: 100%;
        }
        .inputsenha button{
            width: 100%;
        }
     }

    *{...    Text is not SVG - cannot display         Nav_Footer
    @import url(style_card.css);

    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #acessibilidade{
        height: 26px;
        line-height: 18px;
        width: 100%;
        background-color: #ebebeb;
        color:#43555f ;
    }
    #acessibilidade a{
        color: #43555f;
    }
    #atalhos li{
        padding: 0 10px;
        list-style:none;
        display: inline;
    }
    #atalhos li a{
        text-decoration: none;
        transition: 0.5s;
    }
    #atalhos li a:hover{
        color: #000;
        transition: 0.5s;
    }
    .fonte, .contraste,#pgacess {
        float: right;
    }
    #atalhos{
        padding:5px 4.5% 5px 4.5%;
    }
    .fonte, #pgacess, .atalho{
        font-size: 0.85rem;
    }
    .contraste{
        font-size: 1.7rem;
        line-height: 9px;
    }
    .s{
        font-size: 1.05rem;
        line-height: 15px;
    }
    .acess{
        display: none;
    }
    nav{
        display: flex;
        margin:0 5%;
        justify-content: space-between;
        font-size: 0.9em;
        border-bottom: rgba(128, 128, 128, 0.407) 1px solid;
    }

    nav img{
        float:right;
    }
    nav ul{
        float:left;
        display: flex;
        list-style: none;
        align-items: center;
    }
    .links{
        margin: 0 10px;
        height: 60px;
        padding: 20px 0;
    }
    .links a{
        text-decoration: none;
        color: #000;
        height: 60px;
    }
    .links ul{
        position: absolute;
        top: 89px;
        display: none;
        background-color: #00a1ff;
        margin: 0;
    }
    .login a:hover{
        text-decoration: underline #000 1px;
    }
    /**Exibe submenu**/
    .links:hover ul{
        display: block;
    }
    .links li{
        padding: 10px 0;
    }
    .links ul li{
        margin: 2px 0;
        width: 155px;
        display: block;
        padding: 5px 0 5px 7px;
        transition: 0.7s;
        border-bottom: rgba(255, 255, 255, 0.45) solid 1px;
    }
    .links ul li:last-child{
        border-bottom: none;
    }
    .links ul li a:hover{
        padding-left: 7px;
        transition: 0.7s;
    }
    .links ul li a{
        color: #fff;
        transition: 0.7s;
    }
    .botão a{
        background-color: #00a1ff;
        border: #00a1ff solid 1px;
        padding: 5px 10px;
        color: #fff;
        border-radius: 5px;
        transition: 0.7s;
    }
    .botão a:hover{
        border: #00a1ff solid 1px;
        color: #00a1ff;
        background-color: #fff;
        transition: 0.7s;
    }
    label img{
        border-radius: 5px;
        margin: 10px 0;
        background-color: #00a1ff;
        padding: 5px;
    }
    label[for="bt_menu"]{
        display: none;
    }
    #bt_menu{
        display: none;
    }

    /*footer*/
    footer{
        background-color: rgb(192, 192, 192);
        color: rgb(84, 84, 84);
        bottom:0;
        width: 100%;
        padding: 5px 0;
        text-align: center;
        font-size: 0.6em;
        position: relative;
    }

    @media screen and (max-width:859px){
        /*tirar menu*/
        #menu{
            display: none;
        }
        label[for="bt_menu"]{
            display: block;
            float: right;
        }
        #acessibilidade{
            display: none;
        }
        #bt_menu:checked ~ #menu{
            display: block;
            background-color: #00a1ff;
            position: absolute;
            width: 100%;
            right: -5px;
            top:63px;
            padding-bottom: 10px;
            height: 330px;
            z-index: 9999;
        }
        .acess{
            display: block;
        }
        .botão a{
            background-color: none;
            border: none;
            color: #fff;
            border-radius: none;
            height: 60px;
            padding: 20px 0;
            text-align: left;
        }
        .botão{
            height: 30px;
            margin-top: 20px;
        }
        .botão a{
            background-color: none;
            border: none;
            padding: 0;
            color: #fff;
            border-radius: 0;
            transition: 0.7s;
        }
        .botão a:hover{
            background-color: #00a1ff;
            border: none;
            padding: 0;
            color: #fff;
            border-radius: 0;
            transition: 0.7s;
        }
        #menu li{
            position: relative;
            float: center;
        }
        #menu .links:nth-child(1):hover ~ .links:nth-child(2){
            margin: 20px 10px;
        }
        #menu .links:nth-child(1):hover ~ .links:last-child{
            padding-top: 0;
        }
        .login a:hover{
            text-decoration: none;
        }
        .links a{
            color: #fff;
        }
        #menu li ul{
            position: static;
        }
        #menu li ul li{
            position: relative;
            float: left;
            display: block;
            border: 0;
           
        }
    }


    @import url(style_card.css);...    Text is not SVG - cannot display         Trabalho voluntario
    main{
        background-color: #00a1ff;
        background-image: url(../imgs/iconswhite.svg);
        height: max-content;
        display: flex;
        justify-content: center;
    }
    section{
        width: 70vw;
        background-color: #fff;
        margin-top: 2vh;
        margin-bottom: 2vh;
        display: flex;
        text-align: center;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.561);
        flex-direction: column;
    }
    section h1{
        margin-top: 30px;
    }
    .padrao{
        margin-top: 20px;
        background-color: rgb(221, 221, 221);
        padding: 20px;
        border-radius: 5px;
        padding-right: 30vw;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.139)inset;
    }
    form{
        text-align: left;
    }
    form label::before{
        content: "* ";
        color: #00a1ff;
    }
    form label{
        font-size: 0.80em;
        margin-bottom: 5px;
        font-weight: bold;
    }
    form input, select{
        width: 300px;
        height: 35px;
        margin: 5px 0;
        font-size: 0.80em;
        padding: 5px;
        border-radius: 3px;
        background-color: none;
        border:rgb(49, 49, 49) solid 1px;

    }
    form textarea{
        border: 1px solid #484848;
        width: 300px;
        height: 100px;
        padding-left: 5px;
        border-radius: 5px;
        resize: none;
        margin-bottom: 10px;

    }
    .radio{
        display: flex;
    }
    .radio input{
        margin-right: 5px;
        width: 15px;
        height: 15px;
    }

    #adicionar{
        display: flex;
    }
    .add{
        margin-top: 30px;
        display: flex;
        align-items: baseline;
        margin-bottom: 100px;
    }
    .editar{
        display: flex;
        flex-direction: column;
        margin-right: 20px;
    }
    .editar input{
        border: none;
        border-bottom: 1px solid #484848;
        color: #484848;
        background-color: #ebebeb;
        height: 30px;
        width: 300px;
        font-size: 1.4rem;
        padding-left: 5px;
        margin-bottom: 10px;
       
    }
    .inputs{
        display: flex;
        align-items: center;
    }
    .exemplos input[type="text"]{
        border: none;
        border-bottom: 1px solid #484848;
        color: #484848;
        background-color: #ebebeb;
        height: 25px;
        width: 200px;
        font-size: 1rem;
        padding-left: 5px;
        margin: 10px 5px;
    }
    .exemplos input[type="radio"]{
        width: 20px;
        height: 20px;
    }
    .exemplos input:focus{
        border: none;
        background-color: #e3e3e3;
        border-bottom: 1px solid #2f2f2f;
        box-shadow: 0 0 0 0;
        outline: 0;
    }
    .editar input:focus{
        border: none;
        background-color: #e3e3e3;
        border-bottom: 1px solid #2f2f2f;
        box-shadow: 0 0 0 0;
        outline: 0;
    }
    .editar textarea{
        border: 1px solid #484848;
        width: 300px;
        height: 100px;
        padding-left: 5px;
        border-radius: 5px;
        resize: none;
        margin-bottom: 10px;

    }
    .editar textarea:focus{
        outline: 0;
    }
    option{
        height: 30px;
        padding: 15px;
    }
    option:hover{
        background-color: #2f2f2f;
    }
    .btns{
        display: flex;
    }
    .new{
        border: 2px solid #2f2f2f;
        background-color: #e3e3e3;
        color: #2f2f2f;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
        transition: 0.7s;
        padding: 5px 10px;
        margin-right: 10px;
    }
    .new:hover{
        background-color: #2f2f2f;
        color: #e3e3e3;  
        transition: 0.7s;  
    }
    .save{
        padding: 5px 10px;
        font-size: 15px;
        border: 0;
        background: #00a1ff;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
        transition: 0.7s;

    }

    .save:hover {
        background: rgba(0, 162, 255, 0.856);
        transition: 0.7s;

    }
    @media screen and (max-width:960px){
        #adicionar {
            display: flex;
            flex-direction: column;
        }
        .padrao{
            padding: 20px 5vw;
           
        }
    }
    @media screen and (max-width:550px){
        section{
            width: 100vw;

        }
    }
    main{...    Text is not SVG - cannot display         User
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-size: 1rem;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    a {
      text-decoration: none;
    }

    nav {
      margin: 0%;
      padding: 0 5%;
      background-color: #00a1ff;
      border-radius: 0 0 5px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    nav > div {
      display: flex;
      align-items: center;
      gap: 3rem;
    }

    nav i {
      font-size: 2rem;
      color: #ffffff;
      cursor: pointer;
    }

    nav .separador {
      width: 0.1rem;
      height: 2rem;
      background: #fff;
    }

    nav .menu-dropdown {
      position: absolute;
      right: 0;
      top: 60px;
      height: 0;
      width: 17.5rem;
      background: #7aceff;
      flex-direction: column;
      gap: 1rem;
      transition: 0.5s;
      z-index: 1;
      visibility: hidden;
      overflow-y: hidden;
      display: flex;
    }

    nav .menu-dropdown li {
      align-self: baseline;
      display: flex;
      width: 75%;
      margin: 0 auto;
    }

    nav .menu-dropdown li a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #fff;
      font-weight: 600;
      font-size: 1.1rem;
    }

    nav .menu-dropdown li a i {
      font-size: 1.5rem;
      width: 2.5rem;
    }

    nav .menu-dropdown li a i.exit {
      transform: rotate(180deg);
      margin-left: -1rem;
      margin-right: 1rem;
    }

    nav .menu-dropdown.show-menu {
      padding: 1rem 0;
      height: 15rem;
      visibility: visible;
    }

    nav ul {
      list-style: none;
    }

    .links {
      margin: 0 10px;
      height: 60px;
      padding: 20px 0;
    }

    .links a {
      color: #fff;
      font-weight: 600;
    }

    .links ul {
      position: absolute;
      top: 63px;
      display: none;
      background-color: #fff;
      margin: 0;
    }

    main .question-dropdown {
      background: none;
      text-align: left;
      font-weight: 600;
      font-size: 1.25rem;
      border: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      cursor: pointer;
    }

    main .question-dropdown,
    main hr {
      width: 100%;
      margin: 2rem 0 0;
    }

    main .question-dropdown span i {
      margin-right: 1rem;
      transition: transform 0.5s;
    }

    main .question-dropdown .question-answer {
      font-weight: 400;
      margin-left: 2rem;
      height: 0;
      visibility: hidden;
      overflow-y: hidden;
      transition: 0.5s;
    }

    main .question-dropdown.show-dropdown .question-answer {
      height: max-content;
      visibility: visible;
    }

    main .question-dropdown.show-dropdown span i {
      transform: rotate(90deg);
    }

    .profile {
      display: flex;
      gap: 5rem;
      margin: 6.75rem 6.375rem;
    }

    .profile.column {
      flex-direction: column;
      gap: 0;
    }

    .profile .container {
      width: 100%;
    }

    .profile .container + .container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .profile .container .container-subtitle {
      color: rgba(0, 0, 0, 0.8);
      margin-bottom: 0.5rem;
      margin-top: 3rem;
    }

    .profile .container .activity-history {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .profile .container .activity-history a {
      width: max-content;
      color: #000;
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 1rem;
      position: relative;
    }

    .profile .container .activity-history a::before {
      content: "";
      position: absolute;
      width: 0;
      bottom: 0;
      left: 2.25rem;
      height: 1px;
      background: #000;
      transition: width 0.3s;
    }

    .profile .container .activity-history a:hover::before {
      width: 75%;
    }

    .profile .container .activity-history a i {
      font-size: 1.25rem;
    }

    .profile .container .link-underline {
      text-decoration: underline;
      color: #00a1ff;
    }

    .profile .container .button-switch {
      margin-top: 1.5rem;
      display: flex;
      background: none;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      border: none;
      width: 75%;
    }

    .profile .container .button-switch .switch {
      width: 2.25rem;
      height: 1.25rem;
      background: #000;
      border-radius: 10px;
      position: relative;
      padding: 0.15rem;
    }

    .profile .container .button-switch .switch::before {
      content: "";
      position: absolute;
      left: 0.1rem;
      background: #fff;
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      transition: transform 0.3s;
    }

    .profile .container .button-switch.active-switch .switch::before {
      transform: translateX(0.975rem);
    }

    .profile .container .container-img {
      width: 20rem;
    }

    .profile .page-subtitle {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
    }

    .profile .form-profile {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .profile .form-profile div {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .profile .form-profile div label {
      font-weight: 600;
    }

    .profile .form-profile div input {
      padding: 0.5rem;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.5);
      outline: none;
    }

    .button {
      padding: 0.5rem 1rem;
      width: max-content;
      background: #00a1ff;
      border: none;
      font-weight: 500;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }

    .circle {
      clip-path: circle();
      background: #d9d9d9;
      width: 14rem;
      height: 14rem;
      margin: 0 auto;
      position: relative;
    }

    .fileImg {
      width: 10rem;
      margin: 2rem;
    }

    .select-image {
      margin-top: 2.25rem;
    }

    .select-image p {
      font-weight: 700;
      margin-bottom: 2rem;
    }

    .select-image .images {
      display: flex;
      gap: 2rem;
    }

    .select-image .images img {
      clip-path: circle();
      width: 7.5rem;
    }

    .profile .container.container-imgs {
      flex-direction: column;
    }

    #delete-photo {
      margin-top: 2.5rem;
    }

    * {...    Text is not SVG - cannot display         Visita Guiada
    main{
        background-image: url(../imgs/icons.svg);
        display: flex;
        justify-content: center;
        height: 85vh;
    }
    .titulo{
        text-align: center;
    }
    .titulo p{
        font-size: 0.80em;
        font-weight: 600;
    }
    .titulo h1{
        color: #00a1ff;
        font-size: 1.8rem;
        line-height:  1.9rem;
        margin-bottom: 10px;
    }

    .form{
        margin-top: 5vh;
        background-color: #fff;
        padding: 20px 30px;
        box-shadow: 1px 2px 5px #00000070;
    }
    .form label::before{
        content: "* ";
        color: #00a1ff;
    }
    .form label{
        font-size: 0.80em;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .form input, select{
        width: 300px;
        height: 35px;
        margin: 5px 0;
        font-size: 0.80em;
        padding: 5px;
        border-radius: 3px;
        border:rgb(49, 49, 49) solid 1px;
    }
    .options__submit {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        padding: 8px 10px;
        font-size: 15px;
        border: 0;
        background: #00a1ff;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        outline: none;
    }

    .options__submit:hover {
        background: rgba(0, 162, 255, 0.856);
    }
    /* Segunda página */
    .horarios{
        margin-top: 5vh;
        background-color: #fff;
        padding: 20px 30px;
        box-shadow: 1px 2px 5px #00000070;
        text-align: center;
        width: 40vw;
        height: fit-content;
    }
    .hdidisponiveis{
        display: flex;
    }
    .hdidisponiveis .checks{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .button{
        display: none;
    }
    .button-label {
        display: inline-block;
        padding: 0.5em 1em;
        margin: 0.5em;
        cursor: pointer;
        color: #000;
        border-radius: 0.25em;
        background: none;
        border: 2px solid #000;
        transition: 0.3s;
        user-select: none;
    }
    .button:checked + .button-label{
        border: 2px solid rgba(0, 162, 255, 0.856);
        color: rgba(0, 162, 255, 0.856);  
        background-color: rgba(207, 237, 255, 0.856);
    }
    .segundo{
        width: 86%;
    }
    /* Terceira página */
    .erro{
        margin-top: 5vh;
        background-color: #fff;
        padding: 20px 30px;
        box-shadow: 1px 2px 5px #00000070;
        text-align: center;
        width: 40vw;
        height: fit-content;
        display: flex;
        flex-direction: column;
        display: none;
    }
    .tituloo{
        text-align: center;
    }
    .tituloo p:first-child{
        font-size: 0.80em;
        font-weight: 600;
    }
    .tituloo p{
        font-size: 0.80em;
        font-weight: normal;
    }
    .tituloo h1{
        color: #00a1ff;
        font-size: 1.8rem;
        line-height:  1.9rem;
        margin-bottom: 10px;
    }
    .terceiro{
        width: 70%;
    }
    main{...    Text is not SVG - cannot display         JAVASCRIPT
    Carrossel
    var imgs = [];
    var slider;
    var imgAtual;
    var maxImg;
    var tempo;
    var tempoTroca;
    var botoes = document.querySelectorAll('.btSlider');


    function preCarregamento() {
        var s = 1;
        for (let i = 0; i < 3; i++) {
            imgs[i] = new Image();
            imgs[i].src = "../imgs/fotosOng/fotos0" + s + ".jpg";
            s++;
        }
    }

    function carrgarImg(img) {
        slider.style.backgroundImage = "url('" + imgs[img].src + "')";
    }

    function inicia() {
        preCarregamento();
        imgAtual = 0;
        maxImg = imgs.length - 1;
        slider = document.getElementById('dvSlider');
        carrgarImg(imgAtual);
        tempoTroca = 0;
    }

    function troca(direcao) {
        tempoTroca = 0;
        imgAtual += direcao;
        if (imgAtual > maxImg) {
            imgAtual = 0;
        } else if (imgAtual < 0) {
            imgAtual = maxImg;
        }
        carrgarImg(imgAtual);
    }

    botoes[0].onclick = function (e) {
        e.stopPropagation();
        troca(-1);
    };
    botoes[1].onclick = function (e) {
        e.stopPropagation();
        troca(1);
    };


    inicia();
    var imgs = [];...    Text is not SVG - cannot display         Contraste
    //script contraste  

    function contraste(caminho, contraste) {
        var link_css = caminho;


        if (getCookie2() == "contraste") {
            link_css = contraste; // se o valor do cookie capturado pela function getCookie2 for contraste, a variável link_css recebe como valor a folha de estilo contraste.css
        } else if (getCookie() == "default") {
            link_css = caminho;
        }

        $(document).ready(function () {

            // Id do HTML
            $("#contraste").click(function () {
                setCookie("contraste");//contraste é o nome do cookie criado e consequentemente o parâmetro value da function setCookie. Ao clicar no link com id contraste, será setado o valor contraste para o cookie criado e ele irá executar a função getCookie2.
                location.reload();
            });

            $("#sem-contraste").click(function () {
                setCookie("default")
                location.reload();
            });

        });

        //<link rel=stylesheet href="contraste.css" type=text/css>
        $("head").append("<link rel=stylesheet href=" + " " + link_css + " " + "type=text/css>");//altera a folha de estilo da página

        function setCookie(value) {
            var data = new Date(); //new Date()cria um novo objeto de data com a data e hora atuais :
            data.setTime(data.getTime() + 600000);//O método setTime () define uma data e hora adicionando ou subtraindo um número especificado de milissegundos. getTime() retorna o número de milissegundos

            //cookies structure
            document.cookie = "contraste=" + value + "; expires=" + data.toUTCString() + "; path=/"; //path - caminho do cookie. path=/ - cookie disponível em todo o domínio.


        }
        //O método toUTCString () retorna um objeto de data como uma string, de acordo com o UTC.
        //Dica: o Universal Coordinated Time (UTC) é o horário definido pelo World Time Standard.
        //Observação: o horário UTC é igual ao horário GMT.

        function getCookie() {
            var cookie = document.cookie.split("=");

            return cookie[1];
        }

        function getCookie2() {
            var nameEQ = "contraste=";
            var ca = document.cookie.split(';');//armazena na variável ca um vetor ou matriz contendo a string do cookie, ignorando o ponto-e-virgula. A saída (eu acho) seria mais ou menos isso: ca = ["contraste=contraste", expires="valor que corresponda à data e tempo que o cookie expira", path=/]
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i]; //cria um loop na matriz ca (i = 0; i <ca.length; i ++) e lê cada valor c = ca [i]).
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return undefined;

        }


        //fim script contraste
    }


    export default {
        contraste: contraste
    };

    //script contraste...    Text is not SVG - cannot display         Contraste 2
    //script contraste  

    function contraste(caminho, contraste) {
        var link_css = caminho;


        if (getCookie2() == "contraste") {
            link_css = contraste; // se o valor do cookie capturado pela function getCookie2 for contraste, a variável link_css recebe como valor a folha de estilo contraste.css
        } else if (getCookie() == "default") {
            link_css = caminho;
        }

        $(document).ready(function () {

            // Id do HTML
            $("#ccontraste").click(function () {
                setCookie("contraste");//contraste é o nome do cookie criado e consequentemente o parâmetro value da function setCookie. Ao clicar no link com id contraste, será setado o valor contraste para o cookie criado e ele irá executar a função getCookie2.
                location.reload();
            });

            $("#ssemcontraste").click(function () {
                setCookie("default")
                location.reload();
            });

        });

        //<link rel=stylesheet href="contraste.css" type=text/css>
        $("head").append("<link rel=stylesheet href=" + " " + link_css + " " + "type=text/css>");//altera a folha de estilo da página

        function setCookie(value) {
            var data = new Date(); //new Date()cria um novo objeto de data com a data e hora atuais :
            data.setTime(data.getTime() + 600000);//O método setTime () define uma data e hora adicionando ou subtraindo um número especificado de milissegundos. getTime() retorna o número de milissegundos

            //cookies structure
            document.cookie = "contraste=" + value + "; expires=" + data.toUTCString() + "; path=/"; //path - caminho do cookie. path=/ - cookie disponível em todo o domínio.


        }
        //O método toUTCString () retorna um objeto de data como uma string, de acordo com o UTC.
        //Dica: o Universal Coordinated Time (UTC) é o horário definido pelo World Time Standard.
        //Observação: o horário UTC é igual ao horário GMT.

        function getCookie() {
            var cookie = document.cookie.split("=");

            return cookie[1];
        }

        function getCookie2() {
            var nameEQ = "contraste=";
            var ca = document.cookie.split(';');//armazena na variável ca um vetor ou matriz contendo a string do cookie, ignorando o ponto-e-virgula. A saída (eu acho) seria mais ou menos isso: ca = ["contraste=contraste", expires="valor que corresponda à data e tempo que o cookie expira", path=/]
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i]; //cria um loop na matriz ca (i = 0; i <ca.length; i ++) e lê cada valor c = ca [i]).
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return undefined;

        }


        //fim script contraste
    }


    export default {
        contraste: contraste
    };

    //script contraste...    Text is not SVG - cannot display         Fonte
    $(document).ready(function(){
        let fonte = 16
        $('#aumentar').click(function(){
            if(fonte<22){
                fonte++
                $('body').css({'font-size': fonte+'px'})
            }
        })
        $('#diminuir').click(function(){
            if(fonte>13){
                fonte--
                $('body').css({'font-size': fonte+'px'})
            }
        })
    })
    $(document).ready(function(){
        let fonte = 16
        $('#aaumentar').click(function(){
            if(fonte<22){
                fonte++
                $('body').css({'font-size': fonte+'px'})
            }
        })
        $('#ddiminuir').click(function(){
            if(fonte>13){
                fonte--
                $('body').css({'font-size': fonte+'px'})
            }
        })
    })
    $(document).ready(function(){...    Text is not SVG - cannot display         Formulario Visitas
    function add(){
        let tipo = document.getElementById("tipo")
        let titulo = document.getElementById("title").value
        let form = document.getElementById("formpadrao")
        let lab = document.createElement('label');
        lab.appendChild(document.createTextNode(titulo + ":"));
       
        form.appendChild(lab);
        form.appendChild(document.createElement('br'));
        if(tipo.value == "Parágrafo"){
            let input = document.createElement('textarea');
            input.disabled = true;
            form.appendChild(input);
            form.appendChild(document.createElement('br'));
        }else if(tipo.value == "Múltipla seleção"){
            document.getElementById("multi_exemplo").hidden = false;
        }else if(tipo.value == "Caixas de seleção"){
            document.getElementById("caixas_exemplo").hidden = false;
        }
    }
    function addradio(){
        let legenda = document.getElementById("legend").value;
        let form = document.getElementById("formpadrao");
        let div = document.createElement('div');
        let legend = document.createElement('p');
        let radio = document.createElement('input');
        div.className = "radio"
        radio.type= "radio";
        radio.disabled = true;
        legend.appendChild(document.createTextNode(legenda));
        div.appendChild(radio);
        div.appendChild(legend);
        form.appendChild(div);
    }
    function saveradio(){
        let form = document.getElementById("formpadrao");
        form.appendChild(document.createElement('br'));
        document.getElementById("multi_exemplo").hidden = true;
    }
    function addbox(){
        let legenda = document.getElementById("legendd").value;
        let form = document.getElementById("formpadrao");
        let div = document.createElement('div');
        let legend = document.createElement('p');
        let check = document.createElement('input');
        div.className = "radio"
        check.type= "checkbox";
        check.disabled = true;
        legend.appendChild(document.createTextNode(legenda));
        div.appendChild(check);
        div.appendChild(legend);
        form.appendChild(div);
    }
    function savebox(){
        let form = document.getElementById("formpadrao");
        form.appendChild(document.createElement('br'));
        document.getElementById("caixas_exemplo").hidden = true;
    }
    function add(){...    Text is not SVG - cannot display         Mod jquery
    var password = document.getElementById("password");
    var confirm_password = document.getElementById("confirm_password");

    function validatePassword(){
      if(password.value != confirm_password.value) {
        confirm_password.setCustomValidity("Senhas diferentes!");
      } else {
        confirm_password.setCustomValidity('');
      }
    }

    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
    var password = document.getElementById("password");...    Text is not SVG - cannot display         Trabalho voluntario
    function add(){
        let tipo = document.getElementById("tipo")
        let titulo = document.getElementById("title").value
        let form = document.getElementById("formpadrao")
        let lab = document.createElement('label');
        lab.appendChild(document.createTextNode(titulo + ":"));
       
        form.appendChild(lab);
        form.appendChild(document.createElement('br'));
        if(tipo.value == "Parágrafo"){
            let input = document.createElement('textarea');
            input.disabled = true;
            form.appendChild(input);
            form.appendChild(document.createElement('br'));
        }else if(tipo.value == "Múltipla seleção"){
            document.getElementById("multi_exemplo").hidden = false;
        }else if(tipo.value == "Caixas de seleção"){
            document.getElementById("caixas_exemplo").hidden = false;
        }
    }
    function addradio(){
        let legenda = document.getElementById("legend").value;
        let form = document.getElementById("formpadrao");
        let div = document.createElement('div');
        let legend = document.createElement('p');
        let radio = document.createElement('input');
        div.className = "radio"
        radio.type= "radio";
        radio.disabled = true;
        legend.appendChild(document.createTextNode(legenda));
        div.appendChild(radio);
        div.appendChild(legend);
        form.appendChild(div);
    }
    function saveradio(){
        let form = document.getElementById("formpadrao");
        form.appendChild(document.createElement('br'));
        document.getElementById("multi_exemplo").hidden = true;
    }
    function addbox(){
        let legenda = document.getElementById("legendd").value;
        let form = document.getElementById("formpadrao");
        let div = document.createElement('div');
        let legend = document.createElement('p');
        let check = document.createElement('input');
        div.className = "radio"
        check.type= "checkbox";
        check.disabled = true;
        legend.appendChild(document.createTextNode(legenda));
        div.appendChild(check);
        div.appendChild(legend);
        form.appendChild(div);
    }
    function savebox(){
        let form = document.getElementById("formpadrao");
        form.appendChild(document.createElement('br'));
        document.getElementById("caixas_exemplo").hidden = true;
    }
    function add(){...    Text is not SVG - cannot display         User
    const icon = document.querySelector('.user-icon'),
        menuDropdown = document.querySelector('.menu-dropdown')

    icon.addEventListener('click', () => {
        menuDropdown.classList.toggle('show-menu')
    })

    const buttonsAnswers = document.querySelectorAll('.question-dropdown'),
        questionsAnswers = document.querySelectorAll('.question-answer')

    let question = function (buttonClick) {
        buttonsAnswers[buttonClick].classList.toggle('show-dropdown')
    }

    buttonsAnswers.forEach((buttonAnswer, i) => {
        buttonAnswer.addEventListener('click', () => {
            question(i)
        })
    })

    const images = document.querySelectorAll('.select-image .images img'),
        fileImg = document.querySelector('.fileImg'),
        circle = document.querySelector('.circle'),
        deletePhoto = document.querySelector('#delete-photo')


    images.forEach(image => {
        image.addEventListener('click', () => {
            fileImg.src = image.src
            circle.classList.add('small-border')
        })
    })

    deletePhoto.addEventListener('click', () => {
        fileImg.src = "../assets/camera.svg"
    })


    const buttonSwitch = document.querySelector('.button-switch')

    buttonSwitch.addEventListener('click', () => {
        buttonSwitch.classList.toggle('active-switch')
    })
    const icon = document.querySelector('.user-icon'),...    Text is not SVG - cannot display         Visita guiada
    document.querySelector(".erro").hidden = true;
    function avançar() {
        document.querySelector(".horarios").hidden = false;
        document.querySelector(".form").hidden = true;
    }
    function confirmar() {
        document.querySelector(".erro").hidden = false;
        document.querySelector(".horarios").hidden = true;
    }
    if(document.querySelector(".form").hidden == false){
        document.querySelector(".erro").hidden = true;
    }
    document.querySelector(".erro").hidden = true;...    Text is not SVG - cannot display         BACK-END
    CRUD
    Empty

  2. #Acessibilidade:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  3. #Admin:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  4. #Alterar senha:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  5. #Avaliação:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  6. #Cadastro:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  7. #Cadastro moderador:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  8. #Cadastro usuário:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  9. #Cadastro voluntário:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  10. #Comentários:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  11. #Editar ONG:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  12. #Excluir cadastro:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  13. #FAQ:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  14. #Favoritos usuários:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  15. #Feed:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  16. #Formulário visita:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  17. #Login:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  18. #ONG:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  19. #Perfil Usuário:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  20. #Privacidade e Segurança:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  21. #Crie sua conta:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  22. #Recuperação de senha:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  23. #Segundo passo:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  24. #Terceiro passo:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  25. #Trabalho voluntário:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display

  26. #Visita Guiada:


    <!DOCTYPE html>
    <html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/imgs/favicon.png" type="image/x-icon">
        <meta name="description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda.">
        <meta name="keywords"
            content="Projetos, FATEC, acessibilidade, Ong, ajuda, instituições, doações, voluntários, desigualdades sociais, políticas públicas, socieloo, cpdev">
        <meta name="author"
            content="Aryel Anne, Ademir Martins, Bianca Jesus, Diogo Lima, Fernanda Sena, Leonardo Cajé (Cross-Plataform Dev)">
        <meta name="generator" content="Visual Studio Code">
        <meta name="robots" content="index,follow">
        <meta itemprop="image" content="https://user-images.githubusercontent.com/84794798/169667225-9db47581-a814-4c78-9dd2-10e44bc9133b.png">


        <!-- Meta dados facebook -->
        <meta property="og:url" content="diogolcarvalho.github.io/socieloo" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Socieloo - Construindo elos sociais" />
        <meta property="og:site_name" content="Socieloo" />
        <meta property="og:description"
            content="Socieloo é um projeto interdisciplinar desenvolvido na FATEC Zona Leste. Cujo o objetivo é ser o elo que liga aqueles que querem ajudar com aqueles que precisam dessa ajuda." />
        <meta property="og:image"
            content="https://raw.githubusercontent.com/DiogoLCarvalho/socieloo/main/src/imgs/Socieloo-logo.png" />

        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        <!-- CSS -->
        <link rel="stylesheet" href="src/css/style_home.css">
        <link rel="stylesheet" href="src/css/style_card.css">
        <link rel="stylesheet" href="src/css/style_header.css">
        <link rel="stylesheet" href="src/css/style_nav_footer.css">
        <script src="src/js/fonte.js"></script>

        <title>Inicio - Socieloo</title>
    </head>

    <body>
        <div id="acessibilidade">
            <ul id="atalhos">
                <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="ddiminuir" title="Diminuir fonte">A-</a></li>
                <li class="fonte"><a href="javascript:void(0)" id="aaumentar" title="Aumentar fonte">A+</a></li>
                <li class="contraste s"><a href="javascript:void(0);" id="ssemcontraste" title="Sem contraste">○</a></li>              
                <li class="contraste c"><a href="javascript:void(0);" id="ccontraste" title="Contraste">●</a></li>
                <li id="pgacess"><a href="src/pages/acessibilidade.html" title="acessibilidade">Acessibilidade</a></li>              
            </ul>
        </div>
        <nav>
            <a href="index.html" accesskey="1">
                <img src="src/imgs/Socieloo 1.png" alt="Logo Socieloo nas cores preto e azul" title="Logo">
            </a>
            <label for="bt_menu"><img src="src/imgs/menu.png" alt="menu"></label>
            <input type="checkbox" id="bt_menu">
            <!--menu responsivo-->
            <ul id="menu">
                <li class="links">
                    <a href="#" accesskey="2">Segmentos▾</a>
                    <ul>
                        <li class="sublink"><a href="">Cidadania</a></li>
                        <li class="sublink"><a href="">Cultura e Esportes</a></li>
                        <li class="sublink"><a href="">Educação</a></li>
                        <li class="sublink"><a href="">Gênero e Diversidade</a></li>
                        <li class="sublink"><a href="">Meio Ambiente</a></li>
                        <li class="sublink"><a href="">Proteção Animal</a></li>
                        <li class="sublink"><a href="">Saúde</a></li>
                    </ul>
                </li>
                <li class="links">
                    <a href="#" accesskey="3">Região▾</a>
                    <ul>
                        <li class="sublink"><a href="">Zona Leste</a></li>
                        <li class="sublink"><a href="">Zona Norte</a></li>
                        <li class="sublink"><a href="">Centro</a></li>
                        <li class="sublink"><a href="">Zona Oeste</a></li>
                        <li class="sublink"><a href="">Zona Sul</a></li>
                    </ul>
                </li>
                <li class="links acess">
                    <a href="#" accesskey="4">Acessibilidade▾</a>
                    <ul>
                        <li class="atalho"><a href="#conteudo" accesskey="1" title="Ir para o conteúdo">Conteúdo[1]↓</a></li>
                        <li class="atalho"><a href="#menu" accesskey="2" title="Ir para o menu de navegação">Menu[2]↓</a></li>
                        <li class="atalho"><a href="#rodape" accesskey="3" title="Ir para o rodapé">Rodapé[3]↓</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Ativar contraste" id="contraste"
                                accesskey="c">Contraste
                                ◉</a></li>
                        <li class="sublink"><a href="javascript:void(0)" title="Desativar contraste" id="sem-contraste"
                                accesskey="z">Sem
                                contraste ○</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="aumentar" title="Aumentar fonte"
                                accesskey="b">Aumentar fonte
                                +</a></li>
                        <li class="sublink"><a href="javascript:void(0)" id="diminuir" title="Diminuir fonte"
                                accesskey="s">Diminuir fonte
                                -</a></li>
                        <li class="sublink"><a href="src/pages/acessibilidade.html"
                                title="Manual de acessibilidade">Acessibilidade</a></li>
                    </ul>
                </li>
                <li class="links login"><a href="src/pages/login.html" accesskey="5">Fazer login</a></li>
                <li class="links botão"><a href="src/pages/cadastro.html" accesskey="6">Cadastre-se</a></li>
            </ul>
        </nav>



        <section class="principal">
            <div class="busca">
                <h1 id="title-index">Um ato de bondade pode ajudar muita gente!</h1>
                <br>
                <div class="buscador">
                    <select name="Segmentos" id="segmentos">
                        <option value="Cidadania">Cidadania</option>
                        <option value="Cultura e Esportes">Cultura e Esportes</option>
                        <option value="Educação">Educação</option>
                        <option value="Gênero e Diversidade">Gênero e Diversidade</option>
                        <option value="Meio Ambiente">Meio Ambiente</option>
                        <option value="Proteção Animal">Proteção Animal</option>
                        <option value="Saúde">Saúde</option>
                        <option value="Segmentos" selected disabled>Segmentos</option>
                    </select>
                    <select name="Região" id="Região">
                        <option value="Zona Leste">Zona Leste</option>
                        <option value="Zona Norte">Zona Norte</option>
                        <option value="Centro">Centro</option>
                        <option value="Zona Oeste">Zona Oeste</option>
                        <option value="Zona Sul">Zona Sul</option>
                        <option value="Região" selected disabled>Região</option>
                    </select>
                    <div class="search">
                        <a href="#">
                            <img src="src/imgs/Vector.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <main id="main-index">
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Adote Sempre Cabe mais Um</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ma">
                        <img src="src/imgs/icon-park-outline_tree.png" alt="">
                    </div>
                    <h2>Pimp My Carroça</h2>
                    <a href="src/pages/ong.html" class="button">Meio Ambiente</a><a href="src/pages/ong.html"
                        class="button">Zona Oeste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ci">
                        <img src="src/imgs/fluent_city-24-regular.png" alt="">
                    </div>
                    <h2>Instituto Resgatando Vidas</h2>
                    <a href="src/pages/ong.html" class="button">Cidadania</a><a href="src/pages/ong.html"
                        class="button">Zona Norte</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img ed">
                        <img src="src/imgs/bi_book.png" alt="">
                    </div>
                    <h2>Calhau Social</h2>
                    <a href="src/pages/ong.html" class="button">Educação</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img pa">
                        <img src="src/imgs/cil_animal.png" alt="">
                    </div>
                    <h2>Abrigo CoraCão</h2>
                    <a href="src/pages/ong.html" class="button">Proteção Animal</a><a href="src/pages/ong.html"
                        class="button">Zona Sul</a>
                </div>
            </a>
            <a href="src/pages/ong.html">
                <div class="card">
                    <div class="img sa">
                        <img src="src/imgs/akar-icons_health.png" alt="">
                    </div>
                    <h2>Associação Popular Saúde</h2>
                    <a href="src/pages/ong.html" class="button">Saúde</a><a href="src/pages/ong.html" class="button">Zona
                        Leste</a>
                </div>
            </a>

            <div vw class="enabled">
                <div vw-access-button class="active"></div>
                <div vw-plugin-wrapper>
                    <div class="vw-plugin-top-wrapper"></div>
                </div>
            </div>
            <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
            <script>
                new window.VLibras.Widget('https://vlibras.gov.br/app');
            </script>
        </main>
        <footer>
            <p>Desenvolvido por Cross-Plataform Dev. Todos os direitos reservados © 2022.</p>
        </footer>

        <!-- Contraste -->
        <script type="module">
            import contraste from "./src/js/contraste2.js";

            contraste.contraste("src/css/style_home.css", "src/css/contraste.css");

        </script>
    </body>

    </html>
    <!DOCTYPE html>...    Text is not SVG - cannot display